<template>
  <div>
    <el-drawer v-model="_isOpen" size="600" title="更多筛选" :direction="'rtl'" modal-class="my-drawer">
      <template #header>
        <h4>更多筛选</h4>
      </template>
      <template #default>
        <div v-if="_filterData.length > 0">
          <p class="title">通用筛选</p>
          <div v-for="(item, index) in _filterData" :key="item.stastsId">
            <div class="attr-item mb20" v-if="item.isCommon === 1">
              <p class="text-over" :title="item.stastsName">{{ item.stastsName }}：</p>
              <el-checkbox-group v-model="filterVal[index]" size="small">
                <!-- 二级属性 -->
                <div
                  v-for="(item2, index2) in item.children"
                  class="attr-wrap"
                  :class="{ 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                  :key="item2.stastsId"
                >
                  <el-checkbox
                    :label="item2.stastsName"
                    :value="item2.stastsId"
                    :key="item2.stastsId"
                    @change="
                      val => {
                        changeAttr2(val, item, item2, index);
                      }
                    "
                  >
                    <template #default>
                      <p class="attr2 f14">{{ item2.stastsName }}({{ item2.productNum || "-" }})</p>
                      <img
                        class="active-icon"
                        v-if="item2?.children?.length <= 0 || !item2?.children"
                        src="@/assets/images/chose_icon.png"
                        alt=""
                      />
                    </template>
                  </el-checkbox>
                  <!-- 三级属性 -->
                  <div class="attr3 ml4" v-if="item2?.children?.length > 0">
                    <el-select
                      v-model="item2.select3"
                      :placeholder="filterVal.flat().includes(item2.stastsId) ? '全部' : '请选择'"
                      clearable
                      multiple
                      style="width: 120px"
                      @change="
                        val => {
                          changeAttr3(val, item2, index, index2);
                        }
                      "
                    >
                      <el-option
                        v-for="item3 in item2.children"
                        :key="item3.stastsId"
                        :label="item3.stastsName"
                        :value="item3.stastsId"
                      />
                    </el-select>
                  </div>
                </div>
              </el-checkbox-group>
            </div>
          </div>

          <p class="title mt40">规格属性筛选</p>
          <!-- 品牌 -->
          <div class="attr-item mb20">
            <p class="text-over">品牌：</p>
            <el-checkbox-group v-model="brandIds" size="small">
              <!-- 二级属性 -->
              <div
                v-for="(item2, index2) in _filterData[0].brands"
                class="attr-wrap"
                :class="{ 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                :key="item2.stastsId"
              >
                <el-checkbox :label="item2.bandName" :value="item2.brandId" :key="item2.brandId">
                  <template #default>
                    <p class="attr2 f14">{{ item2.bandName }}</p>
                    <img
                      class="active-icon"
                      v-if="item2?.children?.length <= 0 || !item2?.children"
                      src="@/assets/images/chose_icon.png"
                      alt=""
                    />
                  </template>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>

          <div v-for="(item, index) in _filterData" :key="item.stastsId">
            <div class="attr-item mb20" v-if="item.isCommon === 0">
              <p class="text-over" :title="item.stastsName">{{ item.stastsName }}：</p>
              <el-checkbox-group v-model="filterVal[index]" size="small">
                <!-- 二级属性 -->
                <div
                  v-for="(item2, index2) in item.children"
                  class="attr-wrap"
                  :class="{ 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                  :key="item2.stastsId"
                >
                  <el-checkbox
                    :label="item2.stastsName"
                    :value="item2.stastsId"
                    :key="item2.stastsId"
                    @change="
                      val => {
                        changeAttr2(val, item, item2, index);
                      }
                    "
                  >
                    <template #default>
                      <p class="attr2 f14">{{ item2.stastsName }}({{ item2.productNum || "-" }})</p>
                      <img
                        class="active-icon"
                        v-if="item2?.children?.length <= 0 || !item2?.children"
                        src="@/assets/images/chose_icon.png"
                        alt=""
                      />
                    </template>
                  </el-checkbox>
                  <!-- 三级属性 -->
                  <div class="attr3 ml4" v-if="item2?.children?.length > 0">
                    <el-select
                      v-model="item2.select3"
                      :placeholder="filterVal.flat().includes(item2.stastsId) ? '全部' : '请选择'"
                      clearable
                      multiple
                      style="width: 120px"
                      @change="
                        val => {
                          changeAttr3(val, item2, index, index2);
                        }
                      "
                    >
                      <el-option
                        v-for="item3 in item2.children"
                        :key="item3.stastsId"
                        :label="item3.stastsName"
                        :value="item3.stastsId"
                      />
                    </el-select>
                  </div>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>

        <div v-else style="display: flex; justify-content: center; width: 100%">
          <el-empty description="暂无数据" />
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="info" @click="cancelClick">重置</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";

const emit = defineEmits(["update:isOpen", "changeAttr"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  filterData: {
    type: Object,
    default: () => {}
  }
});

const brandIds = ref([]);
const _filterData = ref([]); //筛选的属性值
const _filterDataCopy = ref([]); //筛选的属性值
const filterVal = ref([]); //用户选中的筛选属性值
const filterVal3 = ref([]); //用户选中的3级筛选属性值

watch(
  () => props.filterData,
  val => {
    // console.log("传递过来的属性数据", val);
    _filterData.value = JSON.parse(JSON.stringify(val));
    _filterDataCopy.value = JSON.parse(JSON.stringify(val));
  },
  { deep: true, immediate: true }
);
const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const reset = () => {
  _filterData.value = JSON.parse(JSON.stringify(_filterDataCopy.value));
  filterVal.value = [];
  filterVal3.value = [];
  brandIds.value = [];
};

//2级属性筛选
const changeAttr2 = (val, item, item2, index) => {
  console.log("这是2级属性筛选===", item.children, filterVal.value);

  //二级选中的属性id重新排序，按照接口返回的属性顺序排
  let sortArr = [];
  filterVal.value.map((arr, i) => {
    if (index === i) {
      let Arr = [];
      if (arr) {
        for (let ids of arr) {
          const _index = item.children.findIndex(child => child.stastsId == ids);
          if (_index >= 0) {
            Arr[_index] = ids;
          }
        }
      }
      sortArr[index] = Arr;
    }
  });
  filterVal.value[index] = sortArr[index];

  if (!val) {
    item2.select3 = [];
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;
};

// 3级属性筛选
const changeAttr3 = (val, item, index, index2) => {
  console.log("这是3级属性筛选===", item);
  if (val) {
    //任意选中一个3级属性，默认选中对应的二级属性
    // console.log(9090909090, filterVal.value, index, index2);
    filterVal.value[index] = filterVal.value[index] || [];
    filterVal.value[index][index2] = item.stastsId;
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;
};

const cancelClick = () => {
  _isOpen.value = false;
  reset();
  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
};
const confirmClick = () => {
  _isOpen.value = false;
  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
};

defineExpose({ reset });
</script>

<style lang="scss">
.my-drawer {
  .el-drawer {
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    font-size: 18px;
    color: #131414;
    margin-bottom: 20px;
    h4 {
      font-weight: normal;
      position: relative;
      // padding-left: 14px;
      // &::before {
      //   position: absolute;
      //   content: "";
      //   left: 0;
      //   top: 6px;
      //   width: 6px;
      //   height: 6px;
      //   background-color: #409eff;
      //   border-radius: 50%;
      // }
    }
  }
  .el-drawer__footer {
    text-align: center !important;
    .el-button--primary {
      --el-button-bg-color: #424e66;
      border: none;
    }
    .el-button.el-button--info {
      --el-color-info: #f2f3f5;
      --el-color-white: #1d2129;
      &:hover {
        --el-button-hover-bg-color: #f2f3f5 !important;
        border-color: #f2f3f5 !important;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/index";
p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
p.title {
  font-size: 16px;
  margin-bottom: 20px;
  color: #3d3d3d;
  font-weight: bold;
}

:deep(.attr-wrap) {
  margin-bottom: 0 !important;
  font-size: 14px;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #3d3d3d;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;

  .attr-wrap {
    display: flex;
    align-items: center;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    min-height: 32px;
    padding: 1px 8px;
    margin-bottom: 0px;
    .el-checkbox__label {
      padding-left: 0;
      margin-right: 8px;
    }
    .el-checkbox.el-checkbox--small {
      border-bottom: 1px solid transparent;
      &.is-checked {
        .el-checkbox__label {
          border-bottom: 1px solid #131414;
          line-height: 30px;
        }
      }
    }
    &.attr-only2 {
      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
      position: relative;
      padding: 1px 0;
      .active-icon {
        display: none;
      }
      .el-checkbox__label {
        margin-right: 0;
      }
      .el-checkbox.el-checkbox--small {
        padding: 1px 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        &.is-checked {
          border: 1px solid #424e66;
          .active-icon {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            right: 0px;
            bottom: 0px;
          }
          .el-checkbox__label {
            border-bottom: none;
          }
        }
      }
    }

    .el-checkbox__input {
      display: none;
    }
    .attr3 {
      min-width: 120px;
    }

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}

.attr-item {
  display: flex;
  align-items: flex-start;
  .el-checkbox-group {
    flex: 1;
  }
  & > p {
    width: 80px;
    color: #86909c;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
</style>
